{extend name="index/index"}

{block name="body"}
<style type="text/css">
	.toph2{
		text-shadow: 0 0 #e2e2e2!important;
    	color: rgb(0, 153, 153)!important;
	}
	.span-tips{
		text-shadow: 0 0 black;
    	color: #7d7d7d;
    	font-size: 14px;
	}
	.login-form{
		/*background: url('__ROOT__/static/theme/img/login/finger_print_monochromatic.png');*/
		background-repeat: no-repeat;
    	background-size: 300px;
    	background-position: bottom right;
	}
	.logo-img{
		background: url('__ROOT__/static/assets//img/zfw.png');
	}
	.login_container-ul{
		display: none;
	}
	.register-tips{
		position: relative;
		left: 20%;
		top: 50%;
	}
	.g_w1200{    width: 1200px;
        margin: 0 auto;
    }
    .hd_header{    height: 60px;line-height: 60px;font-size: 20px;
    display: block;
    background-color: #fff;}
    label span{position: unset!important;display: unset!important;line-height: 20px!important;}
    .pass-label{
    width: 160px !important;
    border-radius: 6px 0 0 6px !important;
    }
    .pass-label .layui-input{
        border-radius: 6px 0 0 6px; 
    }

</style>
{php}
{//var_dump(1);}
{/php}

<div class="login-container" data-supersized="__ROOT__/static/theme/img/login/bg1.jpg,__ROOT__/static/theme/img/login/bg2.jpg">
    <div class="header notselect layui-hide-xs">
        <a href="{:url('@')}" class="title">{:sysconf('app_name')}<span class="padding-left-5 font-s10">{:sysconf('app_version')}</span></a>
        {notempty name='devmode'}
        <a class="pull-right layui-anim layui-anim-fadein" href='https://gitee.com/zoujingli/ThinkAdmin'>
            <img src='https://gitee.com/zoujingli/ThinkAdmin/widgets/widget_1.svg' alt='Fork me on Gitee'>
        </a>
        {/notempty}
    </div>
	<div class="page login-page">
	    <div class="hd_header">
            <div class="g_w1200">
                 <a href="{:url('@')}" class="title">{:sysconf('app_name')}<span class="padding-left-5 font-s10">{:sysconf('app_version')}</span></a>
            </div>
        </div>

	  <div class="container d-flex align-items-center">
	    <div class="form-holder has-shadow">
	      <div class="row">
	        <!-- Logo & Information Panel-->
	        <div class="col-lg-6">
	          <div class="info d-flex align-items-center">
	            <div class="content">
	            	<div class="logo-img"></div>
	              <div class="logo">
	                <h1>欢迎登录</h1>
	              </div>
	              <p>协成智能访客系统</p>
	            </div>
	          </div>
	        </div>
	
	<!-- <div class="lowin lowin-blue">
		<div class="lowin-brand">
			<img src="/thinkadmin/public/static/assets/img/kodinger.jpg" alt="logo">
		</div> -->
	<!-- 	<div class="lowin-wrapper">
			<div class="lowin-box lowin-login">
				<div class="lowin-box-inner"> align-items-center-->

	<div class="col-lg-6 bg-white">

		<div class="form d-flex  login-form">

			<!-- 	    <div class="content"> -->
    <form data-login-form onsubmit="return false" method="post" class="layui-anim layui-anim-upbit" autocomplete="off">
        <h2 class="notselect toph2" >用户登录</h2>


<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title login-choise" style="height: unset;">
    <li data-id="1" class="layui-this">账号登录</li>
     <li data-id="2" class="">短信登录</li>
    <!-- <li data-id="3">微信登录</li> -->
  </ul>
  <div class="layui-tab-content" >
    <div class="layui-tab-item layui-show">
    	
      <ul id="normal-login">
            <li class="username">
                <!--<div class="span-tips">账号：</div>-->
                <label>
                    <i class="layui-icon layui-icon-username" style="margin-top: -8px;"></i>
                    <input maxlength="11" class="layui-input" id="login-username" required pattern="" name="username" autofocus autocomplete="off" placeholder="手机号" title="请输入手机号" style="padding-right: 100px;text-indent: 45px;">
                </label>
            </li>
            <li class="password">
                <!--<div class="span-tips">密码：</div>-->
                <label>
                    <i class="layui-icon layui-icon-password" style="margin-top: -8px;"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="登录密码" title="请输入登录密码" style="padding-right: 100px;text-indent: :;px;">
                </label>
            </li>
            <li class="verify layui-hide">
                <label class="inline-block relative">
                    <i class="layui-icon layui-icon-picture-fine"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="verify" maxlength="4" autocomplete="off" placeholder="验证码" title="请输入验证码">
                </label>
                <label data-captcha="{:url('admin/login/captcha',[],false)}" data-field-verify="verify" data-field-uniqid="uniqid" data-captcha-type="{$captcha_type}" data-captcha-token="{$captcha_token}"></label>
            </li>
            <li class="text-center padding-top-20" style="padding-right: 120px;">
                <button type="submit" class="btn btn-primary full-width" id="login"
				 data-form-loaded="立即登入" >正在载入</button>
            </li>
			 <br />
   		

        </ul>
        <div class="layui-form-item register-tips">
			<small>没有账号?</small><a href="{:url('login/register')}" class="signup">&nbsp;注册</a>
		</div> 

    </div>
    <div class="layui-tab-item">
    	<div id="login_container">
    	    
    	</div>
        <ul id="normal-login2">
            <li class="username">
                <!--<div class="span-tips">手机号:</div>-->
                <label>
                    <i class="layui-icon layui-icon-username" style="margin-top: -8px;"></i>
                    <input minlength="11" maxlength="11" class="layui-input" id="login-username" required pattern="((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)" name="phone" autofocus autocomplete="off" placeholder="手机号" title="请输入手机号" style="padding-right: 100px;text-indent: 45px;">
                </label>
            </li>
            <li class="verify margin-top-20">
                 <!--<div class="span-tips">验证码:</div>-->
                <label class="inline-block relative pass-label">
                    <i class="layui-icon layui-icon-picture-fine" style="margin-top: -8px;"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="code" maxlength="6" autocomplete="off" placeholder="请输入验证码" title="">
                      </label>
                    <button id="send-code-button" style="position: absolute;top: 0;border-radius: 0 6px 6px 0!important;" type="button" class="layui-btn layui-btn-radius layui-btn-primary">发送验证码</button>
          
          <!--       <label data-captcha="{:url('admin/login/captcha',[],false)}" data-field-verify="verify" data-field-uniqid="uniqid" data-captcha-type="{$captcha_type}" data-captcha-token="{$captcha_token}"></label> -->
            </li>
            <li class="text-center padding-top-20" style="padding-right: 120px;">
                <button type="submit" class="btn btn-primary full-width" id="login2"
				 data-form-loaded="立即登入" >正在载入</button>
            </li>
			 <br />
   		

        </ul>
    </div>
<!--     <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div> -->
  </div>
</div>
    <input type="hidden" name="login_type" value="1">
    </form>
   
	<!--  </div> -->
	    
	          </div>


	        </div>

	      </div>
	    </div>
	  </div>
	</div>
    <!-- <div class="footer notselect">
        <p class="layui-hide-xs"><a target="_blank" href="https://www.google.cn/chrome">推荐使用谷歌浏览器</a></p>
        {:sysconf('site_copy')}
        {if sysconf('miitbeian')}<span class="padding-5">|</span><a target="_blank" href="http://beian.miit.gov.cn">{:sysconf('miitbeian')}</a>{/if}
    </div>
</div> -->
	<!-- </div>
			</div> -->
					</div>
				</div>
			</div>
		
			<footer class="lowin-footer">
		
			</footer>
		</div>
{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/theme/css/login.css?times=20201107">
	<link rel="stylesheet" href="__ROOT__/static/assets/css/auth2.css">
	 <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
	<link rel="stylesheet" href="__ROOT__/static/assets/css/style.default.css" id="theme-stylesheet">
{/block}

{block name='script'}

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
	$(document).ready(function()
		{
        //监听登录方式
        $('.login-choise li').on('click',function(){
            var login_type = $(this).data('id')
            console.log(login_type)
            $('input[name="login_type"]').val(login_type)

        })
		// 	var gourle = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed93066ca98ccfb9&redirect_uri='+encodeURIComponent('http://pc.zsicp.com/admin.html#/admin/index/main.html?spm=m-1')+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
		// $('#gourl').on('click',function(){
		// 	window.location.href = gourle
		// })
		  //  var obj = new WxLogin
		  //  ({
		  //      id:"login_container",//div的id
		  //      appid: "wxed93066ca98ccfb9",
		  //      scope: "snsapi_login",//写死
		  //      redirect_uri:encodeURIComponent("http://pc.zsicp.com/admin/login/index") ,
		  //      state: Math.ceil(Math.random() * 1000),
		  //      style: "black",//二维码黑白风格        
		  //      href: ""
		  //  });
		});

     $('.wechat-login').on('click',function(){
     	$('.login_container-ul').css({'display':'block'})
     	$('#normal-login').css({'display':'none'})
     })
     $('.wechat-login').on('click',function(){
     	$('.login_container-ul').css({'display':'block'})
     	$('#normal-login').css({'display':'none'})
     })

        //发送验证码相关
        var seconds = 15;
        // function settimeout_send(s){
         
        //     $('#send-code-button').text(s)

        // }
       // var interval_send = setInterval(function(){
       //            seconds = seconds-1
       //            if(seconds === 0){
       //                  clearInterval(interval_send);
       //              }
       //            settimeout_send(seconds)
       //        },1000)

        $("#send-code-button").click(function() {
        if($('#send-code-button').text()!="发送验证码"){return}
        var phone_number = $("input[name='phone']").val()
        if(!checkMobile(phone_number)){$.msg.error('请填写正确手机号');return;}
        //$("input[name='phone']").attr('disabled',true)
        //限制发送


        postData = {};
        postData['phone_num'] = phone_number
        postData['type'] = 'login'
        // $(data).each(function(i) {
        //     postData[this.name]= this.value;
        // });
        // postData['create_at']=create_at;
        console.log(postData);
        // 将获取到的数据post给服务器
        url = SCOPE.send_url;
        $.post(url, postData, function(result) {
            if (result.code == 1) {
                //成功
                // interval_send()
                var interval_send = setInterval(function(){
                          seconds = seconds-1
                          $('#send-code-button').text(s)
                          if(seconds == 0){
                               $('#send-code-button').text('发送验证码')
                               clearInterval(interval_send);
                            }
                      },1000)
                //return dialog.success(result.info);
            } else if (result.code == 400) {
                // 失败
                if(result.data.code==3){
                    $.msg.error(result.info);
                    setTimeout(function(){
    
               window.location.href="{:url('register')}"
            },2100);
                    
                }
                return $.msg.error(result.info);
            }
        }, "JSON");
    });


        var SCOPE = {
        'send_url' : "{:url('admin/login/send_code')}",
    };

function checkMobile(str) {
 var re = /^1\d{10}$/
 if (re.test(str)) {
  return true
 } else {
  return false
 }
}
</script>
<script src="__ROOT__/static/assets/js/auth.js"></script>
<script src="__ROOT__/static/login.js"></script>
<script src="__ROOT__/static/plugs/supersized/supersized.3.2.7.min.js"></script>
{/block}



